<template>
  <div>
    <div>uitest   暂时用来做拖拽</div>
  <!--  <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item" class="item">
          <p>{{item}}</p>
        </div>
      </transition-group>
    </vuedraggable>-->

    <div class="dragDemo">
      <!--列表1-->
      <draggable class="list-group"
                 element="div"
                 v-model="listLeft"
                 :options="dragOptions1"
                 :move="onMove"
                 @start="isDragging=true"
                 @end="isDragging=false"
                 id="12"
                 >
        <div v-for="(item,key) in listLeft" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
          {{item.name}}-{{item.value}}-{{item.status}}
        </div>
      </draggable>

      <!--列表2-->
      <draggable class="list-group"
                 element="div"
                 v-model="listRight"
                 :options="dragOptions2"
                 :move="onMove"
                 @start="isDragging=true"
                 @end="isDragging=false"
                 id="13"
      >
        <div v-for="(item,key) in listRight" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
          {{item.name}}-{{item.value}}--{{item.status}}
        </div>
      </draggable>

      <draggable class="list-group"
                 element="div"
                 v-model="thirdlist"
                 :options="dragOptions3"
                 :move="onMove"
                 @start="isDragging=true"
                 @end="isDragging=false"
                 id="14"
      >
        <div v-for="(item,key) in thirdlist" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
          {{item.name}}-{{item.value}}-{{item.status}}
        </div>
      </draggable>

    </div>
    {{listLeft}}
    <hr>
    {{listRight}}
    <hr>
    {{thirdlist}}

    <div>
      {{ruleinfo}}}
      <ruleinfoComponenet :ruleinfo="ruleinfo"></ruleinfoComponenet>
      <el-input></el-input>
      <el-button @click="getRuleIfo " type="primary" style="margin-left: 16px;">
        点我打开
      </el-button>
      <!--<el-drawer-->
        <!--title="我是标题"-->
        <!--:visible.sync="drawer"-->
        <!--direction="ltr"-->
        <!--:wrapperClosable="flag"-->
        <!--:modal="flag"-->
        <!--&gt;-->
        <!--<span>我来啦!</span>-->
      <!--</el-drawer>-->


    </div>

    <div v-for="index in [1,2]">
      <selectTool ref="clearselect" :options="cwtype" label="name" @selectedindex="getziptypeindex"></selectTool>
    </div>


    <el-button @click="clear">清除</el-button>


    <el-button @click="cleartabledata">表格清除</el-button>
    <el-table
      :data="tableData"
      style="width: 100%" empty-text="hehehehe">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>


  </div>



</template>

<script>
  import  draggable  from 'vuedraggable'
  import selectTool from '../shuiyoutools/components/selectTool'
  import ruleinfoComponenet from '../shuiyoutools/components/ruleInfo'
    export default {
        name: "UITest",

      data(){
          return{
            tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
            list: [1,2,34,4,54,5],
            isDragging:false,
            listLeft:[{
              name:'数据一',
              value:'1',
              status:0
            },{
              name:'数据二',
              value:'2',
              status:0
            },{
              name:'数据三',
              value:'3',
              status:0
            },{
              name:'数据四',
              value:'4',
              status:0
            },{
              name:'数据五',
              value:'5',
              status:0
            }],
            listRight:[{
              name:'数据六',
              value:'6',
              status:1
            }],
            oldleftlist:[],
            thirdlist:[],
            ruleinfo:[],
            drawer : false,
            flag:false,
            cwtype:[{
              name:'一般企业会计准则',
              dm:'ZL1001001'
            },{
              name:'一般企业会计准则已执行',
              dm:'ZL1001001'
            },{
              name:'政府会计制度_单位',
              dm:'ZL1001051'
            },{
              name:'政府会计制度_彩票',
              dm:'29895'
            },{
              name:'政府会计制度_医疗',
              dm:'29895'
            },{
              name:'政府会计制度_林场',
              dm:'29895'
            },{
              name:'银行业',
              dm:'ZL1001036'
            },{
              name:'保险业',
              dm:'ZL1001038'
            },{
              name:'证券业',
              dm:'ZL1001037'
            },{
              name:'金融已执行',
              dm:'ZL1001050'
            },{
              name:'其他会计制度',
              dm:'ZL1001052'
            },{
              name:'小企业会计准则',
              dm:'ZL1001003'
            },{
              name:'企业会计制度',
              dm:'ZL1001002'
            },],

          }
      },
      methods:{
        cleartabledata(){
          this.tableData = []
        },

        clear(){
          console.log(this)
          console.log(this.$refs)
          for(let i in this.$refs.clearselect){
            this.$refs.clearselect[i].$emit('clearselect','adfd')
          }
         // this.$refs.clearselect.$emit('clearselect','adfd')
        },
        getziptypeindex(index){
          console.log('getziptypeindex')
          console.log(index)
        },

          getRuleIfo(){
            console.log("getruleinfo")
            this.ruleinfo = {"preRuleScriptDtos":[{"id":40000000001,"ruleScript":"DSF.isNotExist(a000000.qyjcxxb2018Form)","modelName":"一般企业会计准则已执行（企业所得税年度申报A类）"}],"ruleVarDtos":[{"id":24607704,"ruleId":"30000000055","varIndex":1,"varName":"基础信息表A000000_103资产总额(万元)","varValue":"a000000.qyjcxxb2018Form.zcze"},{"id":24607705,"ruleId":"30000000055","varIndex":2,"varName":"资产负债表_企业会计准则（已执行）_资产总计_年初余额","varValue":"SDS.getValue(ybqyzcfzbyzxVO.ybqyzcfzbzbyzxGrid.ybqyzcfzbzbyzxGridlb,\"ewbhxh\",34,\"snnmyeZc\")"},{"id":24607706,"ruleId":"30000000055","varIndex":3,"varName":"资产负债表_企业会计准则（已执行）_资产总计_期末余额","varValue":"SDS.getValue(ybqyzcfzbyzxVO.ybqyzcfzbzbyzxGrid.ybqyzcfzbzbyzxGridlb,\"ewbhxh\",34,\"qmyeZc\")"}],"ruleScriptDtos":[{"id":30000000055,"ruleScript":"{基础信息表A000000_103资产总额(万元)}-(({资产负债表_企业会计准则（已执行）_资产总计_年初余额}+{资产负债表_企业会计准则（已执行）_资产总计_期末余额})/2)/100>0","ruleName":"基础信息填报有误","ruleTip":"1.A000000《企业基础信息表》“103资产总额”为：${基础信息表A000000_103资产总额(万元)}万元，请核实。","sbbMc":"企业基础信息表"}]}
          },
        handleClose(){
          console.log("======")
        },
        onMove({relatedContext, draggedContext,to}) {
          const relatedElement = relatedContext.element;
          const draggedElement = draggedContext.element;
        // console.log(relatedContext.list)
        // console.log(draggedContext.list)
         console.log(to.id)
          console.log(draggedElement)
          draggedElement.status=to.id
          return (
            (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
          );

        },
        rightStart(){
          this.oldleftlist=this.listLeft.concat();
          this.isDragging=true;
        },
        rightEnd(){
          this.isDragging=false;
          //左边数据不变
          this.listLeft=this.oldleftlist.concat();
        }
      },
      components:{
        draggable,
        ruleinfoComponenet,
        selectTool
      },
      computed:{
        dragOptions1() {
          return {
            animation: 0,
            group: {
              name: "description",
          //    pull:'clone'
            },
            ghostClass: "ghost",
            dataIdAttr:10
          };
        },
        dragOptions2(){
          return {
            animation: 0,
            group: "description",
            dataIdAttr:11
          };
        },
        dragOptions3(){
          return {
            animation: 0,
            group: "description",
            dataIdAttr:12
          };
        },

      }
    }
</script>

<style scoped >
  .dragDemo {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    color: #555;
  }
            >div{
                padding:10px;
                 border-bottom:1px dashed #ddd;}
  img{
    width:25px;
    height:25px;
    vertical-align: middle;
    padding-right:10px;
  }

  .list-group {
    width: 300px;
    border: 1px solid #ddd;
    text-align: center;
    margin-right: 50px;
  }

</style>
